# Component: Media Program Detail

Live broadcast interface with schedule tracking and calendar integration

Broadcast Block

### BEM Anatomy

| Type      | Class Name                 | Description                                                                                             |
| --------- | -------------------------- | ------------------------------------------------------------------------------------------------------- |
| ==Block== | `.as-media-program-detail` | The core wrapper. Encapsulates the card and the keyword tags.                                           |
| Element   | `__card`                   | The primary visual wrapper (often using card-style shadow/background) for the video and top-level info. |
| Element   | `__video`                  | A `ratio-16x9` container housing the iframe or thumbnail fallback.                                      |
| Element   | `__image`                  | The poster or fallback image displayed before the video is initialized or if playback fails.            |
| Element   | `__footer`                 | The bottom section of the detail view containing metadata and interaction buttons.                      |
| Element   | `__meta-data`              | A flex container in the footer that distributes date, category, and provider info.                      |
| Element   | `__meta`                   | The base unit for a metadata entry, providing consistent typography and icon alignment.                 |
| Modifier  | `__meta--date`             | Styles the metadata specifically for publication dates (e.g., italics or calendar icon).                |
| Element   | `__time-from`              | The starting timestamp for a program.                                                                   |
| Element   | `__time-dash`              | A decorative or functional separator (usually a "—") between start and end times.                       |
| Element   | `__time-to`                | The ending timestamp for a program.                                                                     |
| Modifier  | `__meta--category`         | Styles the metadata for taxonomy tags; may include background-color chips.                              |
| Modifier  | `__meta--provider`         | Contextual modifier to strip default link styling from provider buttons.                                |
| Modifier  | `__meta--ics`              | Specific context for the calendar button; sets a circular border-radius.                                |
| Element   | `__button`                 | Actionable elements within the detail view (e.g., Download, Share, or Play).                            |
| Element   | `__keywords`               | The container for SEO-friendly keyword tags located at the bottom of the block.                         |

### Conditional Utilities

The component features time-sensitive logic to improve user experience. Specifically, the ICS (Calendar) download button only appears active if the broadcast has not yet started.

##### Generated HTML (Future Program)

```html
<div class="as-media-program-detail">
    <div class="as-media-program-detail__card card">
        <div class="as-media-program-detail__footer card-footer">
            <div class="as-media-program-detail__meta-data">
                <div class="as-media-program-detail__meta--date">
                    <span class="as-media-program-detail__time-from">14:00</span>
                    <span class="as-media-program-detail__time-dash">-</span>
                    <span class="as-media-program-detail__time-to">15:30</span>
                </div>
                <div class="as-media-program-detail__meta--ics">
                    <button class="as-media-program-detail__button btn btn-primary">
                        <i class="fa-solid fa-calendar-plus"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
```

##### SCSS

```scss
.as-media-program-detail {
  &__meta {
    &--ics {
      .as-media-program-detail__button {
        // Circular button for ICS action
        border-radius: 50%;
      }
    }
  }

  &__time-dash {
    // Precise spacing for time ranges
    margin: 0 0.25rem;
  }
}
```
